<template>
  <div>
    <div class="container breadcrumb" style="margin-top: 46px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">我要咨询</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="sq_box_content container">
      <div class="title">
        我要咨询
      </div>
      <div class="text">
        请填写您的联系方式，工作人员将尽快与您联系
      </div>
      <div class="form_box">
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="0">
          <div class="item">
            <el-form-item prop="name">
              <el-input v-model="form.name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item prop="phone">
              <el-input v-model="form.phone" placeholder="请输入您的电话"></el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item prop="company">
              <el-input v-model="form.company" placeholder="请输入您的企业名称"></el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-input v-model="form.position" placeholder="请输入您的岗位"></el-input>
          </div>
        </el-form>
      </div>

      <div>
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="请填写其它补充信息"
          v-model="form.remark"></el-input>
      </div>

      <div class="CheckboxTitle">
        请选择需要咨询的业务类型（可多选）
      </div>

      <div class="btnCheckbox">
        <el-button v-for="(item, index) in btnArray" :key="index" :class="{ active: item.btnActive }"
          @click="clickBtnName(item.value, index)">{{ item.label }}</el-button>
      </div>

      <div class="demo-input-suffix">
        <el-button style="
                  display: block;
                  width: 303px;
                  background-color: #106bf3;
                  border-color: #33bf92;
                  border-radius: 10px;
                " @click="btnOk('ruleForm')" type="primary">填写完成，提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { PAGE_BASE_URL } from "@/config";
import { consultAdd } from "@/api/web";


export default {
  components: {
  },

  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入您的电话'));
      }
      setTimeout(() => {
        //检验手机号码
        let reg = /^1[3456789]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号码'));
        } else {
          callback();
        }
      }, 0);
    };
    return {
      form: {
        name: "",
        phone: "",
        company: "",
        position: "",
        type: 7,
        remark: "",
        from: "",
      },
      array: [],
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
        ],
        phone: [
          { validator: checkAge, trigger: 'blur' },
        ],
        company: [
          { required: true, message: '请输入您的企业名称', trigger: 'blur' },
        ],
      },
      btnArray: [
        {
          label: "海外维权",
          btnActive: false,
          value: "海外维权",
        },
        {
          label: "产学研对接",
          btnActive: false,
          value: "产学研对接",
        },
        {
          label: "专利管理",
          btnActive: false,
          value: "专利管理",
        },
        {
          btnActive: false,
          label: "职称考试",
          value: "职称考试",
        },
        {
          btnActive: false,
          label: "专利保险",
          value: "专利保险",
        },
        {
          btnActive: false,
          label: "质押融资",
          value: "质押融资",
        },
        {
          btnActive: false,
          label: "认证申报",
          value: "认证申报",
        },
        {
          btnActive: false,
          label: "其他业务",
          value: "其他业务",
        },
      ],
    };
  },
  methods: {
    clickBtnName(value, index) {
      this.btnArray[index].btnActive = !this.btnArray[index].btnActive;
      if (this.array.indexOf(value) !== -1) {
        this.array.splice(this.array.indexOf(value), 1);
      } else {
        this.array.push(value);
      }
    },
    btnOk(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          let array = this.array.join(",").replace(/,/g, "、");

          this.form.remark = `咨询内容:${array}
          咨询补充：${this.form.remark}`;
          this.form.from = `${PAGE_BASE_URL}#` + this.$route.path;

          console.log(this.form);
          this.submit(this.form);
          this.form = {
            name: "",
            phone: "",
            company: "",
            position: "",
            type: 7,
            remark: "",
            from: "",
          };
        } else {
          console.log('请填写信息');
          return false;
        }
      });
      // 来自


    },
    async submit(form) {
      try {
        await consultAdd({
          ...form,
        });
        this.$message.success("提交成功");
        this.btnArray.reduce((pre, cur) => {
          cur.btnActive = false;
        }, [])
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.breadcrumb {
  padding-bottom: 15px;
  border-bottom: 1px solid #BFC2D8;
}

.sq_box_content {

  margin-top: 48px;

  .title {
    font-size: 75px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #202225;
    margin: 48px 0;
  }

  .text {
    margin: 39px 0 48px 0;
    font-size: 30px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #7A8186;
  }

  .form_box {
    .el-form {
      display: flex;
      flex-wrap: wrap;

    }

    .item {
      flex: 50%;
      box-sizing: border-box;
      padding-right: 10px;
      margin-bottom: 13px;
    }

    .item:nth-child(2n) {
      padding-right: 0;
      padding-left: 10px;
    }
  }

  .CheckboxTitle {
    font-size: 15px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #4C4C4C;
    margin-top: 41px;
    margin-bottom: 21px;
  }

  .btnCheckbox {
    width: 50%;
    // height: 150px;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 66px;

    .el-button {
      margin-left: 0;
      margin: 8px 5px;
      width: 118px;
    }

    .active {
      background-color: #106BF3;
      color: #fff;
    }
  }
}

@media (max-width: 750px) {}
</style>